<!--  自定义文件上传 -->
<template>
  <div class="uploadFile">
    <slot></slot>
    <el-upload action="#" :show-file-list="false" :accept="accept" :auto-upload="false" :on-change="onChange"
      :limit="limit" :file-list="fileLis" :on-exceed="onExceed" :multiple="multiple">
      <el-button size="small" type="primary">{{ $t('teamDoc.temp.clickUpload') }}</el-button>
      <div style="margin: 5px 0;" slot="tip" class="el-upload__tip">{{ describe }}</div>
    </el-upload>
    <!-- 文件列表 -->
    <div class="demo_image__list">
      <div class="demo-image__preview" v-for="(item, index) in fileLis" :key="index">
        <svg-icon :icon-class="iconClass(item)"
          style="font-size: 40px;vertical-align: middle;margin-right: 10px;margin-left: 10px;"></svg-icon>
        <p style="margin: 0;">{{ item.name }}</p>

        <img @click="onDelImg(item)" class="deleteImg" src="@/assets/images/delete.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const { proxy } = getCurrentInstance() as any
const props = defineProps({
  limit: {
    // 最大上传个数
    type: Number,
    default: 0
  },
  describe: {
    // 描述文件
    type: String,
    default() {
      return '只能上传word/ppt/pdf/xls文件，且不超过10M'
    }
  },
  accept: {
    // 文件类型
    type: String,
    default: ".ppt,.pptx,.doc,.docx,.xls,.xlsx,.pdf" // 注意！！！ 每个类型之间用英文逗号隔开，不要加空格否则匹配失效
  },
  multiple: {
    // 多选
    type: Boolean,
    default: false
  },
  fileSize: {
    type: Number,
    default: 10 // 默认限制上传文件大小为5M
  }
})
const fileLis = ref<any>([])

const iconClass = computed(() => {
  return (item: any) => {
    if (getExtension(item.name) == ".docx" || getExtension(item.name) == ".doc") {
      return "Word"
    }
    if (getExtension(item.name) == ".xls" || getExtension(item.name) == ".xlsx") {
      return "Excel"
    }
    if (getExtension(item.name) == ".pdf") {
      return "Pdf"
    }
    if (getExtension(item.name) == ".ppt" || getExtension(item.name) == ".pptx") {
      return "PPT"
    }
    if (getExtension(item.name) == ".pdf") {
      return "Pdf"
    }
    if (getExtension(item.name) == ".png" || getExtension(item.name) == ".jpg" || getExtension(item.name) == ".jpeg") {
      return "tupian"
    }
  }
})

const onChange = (file) => {
  let fileType = props.accept.split(",")
  const isLt500k = file.size / 1024 / 1024 < props.fileSize
  if (!fileType.includes(getExtension(file.name))) {
    onDelImg(file)
    ElMessage.warning(proxy.$t(`只能上传${props.accept}格式的文件`))
    return
  }
  if (!isLt500k) {
    // this.$message.warning(this.$t(`只能上传${this.fileSize}M以下的文件`))
    ElMessage.warning(proxy.$t(`只能上传${props.fileSize}M以下的文件`))
    return
  }
  fileLis.value.push(file)
}

const onDelImg = (file) => {
  const newArray = fileLis.value.filter((element, index) => element.uid !== file.uid)
  fileLis.value = newArray
}

const onExceed = (files, fileList) => {
  // this.$message.warning(this.$t("teamDoc.temp.tip3"));
  ElMessage.warning(proxy.$t("teamDoc.temp.tip3"))
}
const getExtension = (filename) => {
  let match = filename.match(/\.(\w+)$/)
  if (match && match[1]) {
    return "." + match[1]
  } else {
    return ""
  }
}
defineExpose({
  fileLis
})
</script>


<style scoped lang="scss">
.demo_image__list {
  max-height: 400px;
  overflow: auto;
}

.demo-image__preview {
  position: relative;
  margin-right: 10px;
  border: 1px solid #eee;
  box-shadow: rgba(31, 35, 41, 0.03) 0px 4px 16px 4px, rgba(31, 35, 41, 0.02) 0px 4px 8px 0px, rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
  border-radius: 10px;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .deleteImg {
    z-index: 100;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -0px;
    right: 0px;
    cursor: pointer;
  }
}
</style>